import React, { useState, useEffect } from "react";
import { getEbook_head } from "../../../components/api";
import { NavLink } from 'react-router-dom'
import style from "./authorCom.module.css";
const { author } = style;

interface IHeadList {
  id: number,
  img: string,
  mark: string
}

export default function AuthorCom() {
  let [headList, setHeadList] = useState<IHeadList[]>([]);

  const get_ebookHead = async () => {
    let res = await getEbook_head();
    // console.log(res, "head");
    setHeadList(res.data);
  };

  let every = headList[0]
  // console.log(every)
  let write = headList[1]
  let get = headList[2]
  let bookku = headList[3]

  useEffect(() => {
    get_ebookHead();
  }, []);
  return (
    <div className={author}>
      {/* {headList.map((item) => (
        <dl key={item.id}>
          <NavLink to={"/detail/" + item.id}>
            <dt>
              <img src={item.img} alt="" />
            </dt>
            <dd>{item.mark}</dd>
          </NavLink>
        </dl>
      ))} */}
      <dl>
        {
          every && <NavLink to={"/detail/" + every.id}>
            <dt>
              <img src={every.img} alt="" />
            </dt>
            <dd>{every.mark}</dd>
          </NavLink>
        }
      </dl>
      <dl>
        {
          write && <NavLink to={"/authordetail/" + write.id}>
            <dt>
              <img src={write.img} alt="" />
            </dt>
            <dd>{write.mark}</dd>
          </NavLink>
        }
      </dl>
      <dl>
        {
          get && <NavLink to={"/authordetail/" + get.id}>
            <dt>
              <img src={get.img} alt="" />
            </dt>
            <dd>{get.mark}</dd>
          </NavLink>
        }
      </dl>
      {/* <dl>
          <NavLink to={"/detail/" + bookku.id}>
          <dt>
            <img src={bookku.img} alt="" />
          </dt>
          <dd>{bookku.mark}</dd>
          </NavLink>
        </dl> */}
      <dl>
        {
         
          bookku &&
         <NavLink to={"/shuku/"}>
          <div>
                    
                      <dt>
                        <img src={bookku.img} alt="" />
                      </dt>
                      <dd>{bookku.mark}</dd>
                    </div>
          </NavLink>
        
        }
      </dl>
    </div>
  );
}
